import React, {Component} from 'react';
import BMap  from 'BMap';
import {Card,Button,DatePicker} from 'antd'

import './mymap.css'
import test from './test'
import StayList from "../Map/StayList";


import currentPoint from './currentPoint'
import DeviceList from "../Map/DeviceList";

import styles from "../Map/index.less";
import {TRAIL} from "../../config/const";
class MyMap extends Component {
    constructor(props) {
        super(props);
        this.state={
            // points:table_list,//停留点的信息
            stayListVisible:false,
            deviceListVisible: false,
            infoWindowPosition: null,//信息框位置
            infoWindowText: '',
            cur_device: '',//当前设备
            checkedKeys: [],
            deviceIdList:[],
            isTrail:false,//默认不显示当前设备
            isFullScreen:false
        }
    }

    /**
     * 点击面板触发事件
     */
    infoWindowHandler = (infoWindowPosition, info) => {
        //{lng: xy[0], lat: xy[1]参数{lng: 100, lat: 39}--- info 是这一行的信息
        const {xy, deviceid} = info;
        const infoWindowText = `
        <dl>
          <dt>设备序列号:</dt>
            <span>${deviceid}</span>
          <dt>坐标:</dt>
            <span>${xy}<span/>
        </dl>
        <a class=${TRAIL}>停留和轨迹</a>
        `;
        this.setState({
            infoWindowPosition,
            infoWindowText,
            cur_device: '' + deviceid
        })
    };

    componentDidMount() {

        var map = new BMap.Map("address"); // 创建Map实例
        map.centerAndZoom(new BMap.Point(120, 30), 7); // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
        map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom();
        //获取marker的属性
        // const pt = myDevice BMap.Point(119, 31.44);
        // var marker = myDevice BMap.Marker(pt);        // 创建标注
        // map.addOverlay(marker);                     // 将标注添加到地图中
        // test.gps_filterdata.map((item,index)=>{
        //     var pt = myDevice BMap.Point(item.lon, item.lat);
        //     var mk = myDevice BMap.Marker(pt);
        //     map.addOverlay(mk);
        //     // return mk;
        // })
        // 创建图标对象
        var a= test.gps_filterdata.map(function (item,index) {
            var pt = new BMap.Point(item.lon, item.lat);
            // var mk = myDevice BMap.Marker(pt);
            // map.addOverlay(mk);
           if(index==0){
               var mk = new BMap.Marker(pt);
               map.addOverlay(mk);
           }
            return pt
        });
        var line=new BMap.Polyline(a,{
            strokeColor:'blue'
        });
        var PointCollection=new BMap.PointCollection(a,{
            color:'red',
            size:2
        });
        PointCollection.addEventListener('click',function (e) {
            var InfoWindow=new BMap.InfoWindow(`<h1>标题</h1>`);
            map.openInfoWindow(InfoWindow, [e.point.lng,e.point.lat]);
        });
        // map.addOverlay(line);
        // map.addOverlay(PointCollection);
        var style={
            backgroundColor:'blue',
            border:'3px solid white'
        };
        var that=this;
        var checkedKeys=[],deviceIdList=[];
        currentPoint.forEach(function (item,index) {
            var myCompOverlay=that.test([item.lng_e6/1000000,item.lat_e6/1000000],style,item);
            map.addOverlay(myCompOverlay);
            checkedKeys.push(item.device_id);
            deviceIdList.push(item.device_id);
        });
        
        this.setState({
            checkedKeys,deviceIdList
        })
        
    }
 
    test=(position,style,info)=>{
        // 复杂的自定义覆盖物
        const infoWindowText = `
                <dl>
                  <dt>设备序列号:</dt>
                    <span>${info.device_id}</span>
                  <dt>坐标:</dt>
                  <span>${position[0]}</span>
                  <span>${position[1]}</span>
                </dl>
                <a style="color: blue" class="trail" >停留和轨迹</a>    
                `;
        var p1=new BMap.Point(position[0],position[1]);
        function ComplexCustomOverlay(point, text, mouseoverText){
            this._point = point;
            this._text = text;
            this._overText = mouseoverText;
        }
        ComplexCustomOverlay.prototype = new BMap.Overlay();
        ComplexCustomOverlay.prototype.initialize = function(map){
            this._map = map;
            var div = this._div = document.createElement("div");
            div.style.position = "absolute";
            div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
            div.style.backgroundColor = style.backgroundColor;
            div.style.border = style.border;
            div.style.borderRadius='100%';
            div.style.color = "blue";
            div.style.cursor = "pointer";
            div.style.height = "12px";
            div.style.width = "12px";
            div.style.marginTop='17px';
            div.style.marginLeft='-9px';
            div.style.boxShadow='0 0 3px 1px blue ';
            div.style.whiteSpace = "nowrap";
            div.style.MozUserSelect = "none";
            var span = this._span = document.createElement("span");
            div.appendChild(span);
            span.appendChild(document.createTextNode(this._text));
            var that = this;
            //
            // var opts = {
            //     width : 250,     // 信息窗口宽度
            //     height: 150,     // 信息窗口高度
            //     // title : "信息",  // 信息窗口标题
            // };
            // var infoWindow = myDevice BMap.InfoWindow(infoWindowText, opts);  // 创建信息窗口对象
            // div.onclick = function(){
            //     map.openInfoWindow(infoWindow, p1);      // 打开信息窗口
            // };

            map.getPanes().labelPane.appendChild(div);
            return div;
        };
        ComplexCustomOverlay.prototype.draw = function(){
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._point);
            // this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
            this._div.style.left = pixel.x + "px";
            this._div.style.top  = pixel.y - 30 + "px";
        };
        var txt = " ", mouseoverTxt = txt + " " + parseInt(Math.random() * 1000,10) + "" ;
        var myCompOverlay = new ComplexCustomOverlay(p1, " ",mouseoverTxt);
        return myCompOverlay;
    };


    handleStayListVisible=()=>{
        this.setState({
            stayListVisible:!this.state.stayListVisible
        })
    };

    onDeviceListVisible=()=>{
        this.setState({
            deviceListVisible:!this.state.deviceListVisible
        })
    };
    handleRequestFullScreen=()=>{
        const {isFullScreen} = this.state;
        const element = document.documentElement;
        if (isFullScreen) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
            this.setState({isFullScreen: false})
        } else {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
            this.setState({isFullScreen: true})
        }
    };

    render() {
        const { points,stayListVisible ,checkedKeys,deviceListVisible,deviceIdList,isFullScreen } =this.state;
        return (
            <div  >

                <Card
                    bodyStyle={{padding: '0'}}
                    title={!!false ?
                        <React.Fragment>
                            <Button type="primary" >当前设备: 1257</Button>
                            <Button onClick={this.handleClickShareMap}>创建分享链接</Button>
                        </React.Fragment> : '地图'}
                    bordered={false}
                    extra={
                        <div className={styles.salesExtraWrap} style={{textAlign: "center",}}>
                            <Button onClick={this.onDeviceListVisible}>{deviceListVisible ? '关闭' : '显示'}设备列表</Button>&nbsp;&nbsp;
                            <Button type="primary" onClick={this.prevDay}>前一天</Button>
                            <DatePicker  onChange={this.getDate} placeholder={'请选择日期'}  />
                            <Button type="primary" onClick={this.nextDay}>后一天</Button>
                            &nbsp;&nbsp;
                            <Button onClick={this.handleRequestFullScreen}>{isFullScreen ? '退出' : '进入'}全屏模式</Button>
                        </div>
                    }
                >
                    <div id="address" ></div>
                </Card>
                <DeviceList onCheck={this.handleCheck} deviceIdList={deviceIdList}
                            checkedKeys={checkedKeys} onVisible={this.handleDeviceListVisible}
                            visible={deviceListVisible}/>
                <StayList points={points} infoWindowHandler={this.infoWindowHandler} visible={stayListVisible}
                          onClose={this.handleStayListVisible}/>
            </div>
        );
    }
}

export default MyMap;